<script setup>
    import {defineProps, nextTick, ref, watch} from 'vue'
    import {Chart} from '@antv/g2';

    const pops = defineProps({
        data: Object
    })
    const chartEle = ref(null)
    const initChart = () => {
        console.log(pops.data)
        chartEle.value = new Chart({
            container: 'chartBookCate',
            autoFit: true,
            height: 400
        });
        chartEle.value
            .data(pops.data)
            .encode('x', 'month')
            .encode('y', 'temperature')
            //.encode('color', 'city')
            .encode('color', 'city').scale('color', {range: ['#00d0e2', '#fcdda4']})

            .scale('x', {
                range: [0, 1],
            })
            .scale('y', {
                nice: true,
            })
            .axis('y', {labelFormatter: (d) => Number.isInteger(d) ? d : ''});

        chartEle.value.line().encode('shape', 'smooth');

        chartEle.value.point().encode('shape', 'point').tooltip(false);
        chartEle.value.options({
            axis: {
                x: {title: null, labelFill: '#ffffff'},
                y: {title: null, labelFill: '#ffffff'},
            },
            legend: {
                color: {
                    itemLabelFill: 'rgba(255,255,255,.3)'
                },
            },
        })

        chartEle.value.render();
    }

    watch(
        () => pops.data,
        (newVal, oldVal) => {
            if (newVal === oldVal) return
            if (newVal.length < 1) return
            //chartEle.value.changeData(pops.data)
            if (oldVal.length > 0) chartEle.value.destroy()
            nextTick(initChart)
        },
        {deep: true}
    );
</script>

<template>
    <div>
        <div id="chartBookCate"></div>
    </div>
</template>

<style scoped>
.chart-content > div {
    min-width: 100%;
}
</style>